<template>
  <div class="home">
    <!-- 添加组件 -->
    <AddItem :init="init" />
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="缩写" width="180">
        <template slot-scope="scope">
          {{ scope.row.short }}
        </template>
      </el-table-column>
      <el-table-column label="文章数" width="180">
        <template slot-scope="scope">
          {{ scope.row.count }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "../http"
import AddItem from "../components/AddItem";
export default {
  name: "Home",
  created() {
    this.init()
  },
  components: {
    AddItem,
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 初始化
    init() {
      axios.get("/api/users/getList").then((res) => {
        this.tableData = res.data.data;
      });
    },
  },
};
</script>
